<!-- Home.vue -->
<template>
  <div class="home">
    <div class="cescolor">
      <!-- 首页 -->
      <span>首页</span>
      <div class="color-box"></div>
      <div class="color-box box2"></div>
    </div>
    <router-link to="/about/123/小明">About params拼接传参</router-link>
    <router-link
      :to="{ name: 'About', params: { id: 123, name: '小明', age: 25 } }"
      >About params传递对象</router-link
    >
    <router-link to="/user?id=123&name=小明">User query传参</router-link>
    <router-link :to="{ path: '/user', query: { id: 123, name: '小明' } }"
      >User query对象传参</router-link
    >
    <router-link to="/person/123/23/男">person props传参</router-link>
    <router-link
      :to="{ name: 'Person', params: { id: 123, age: 23, gender: '男' } }"
      >person props对象传参</router-link
    >
    <router-link to="/people/123/小明/25/男">people props函数</router-link>
    <router-link
      :to="{
        name: 'People',
        params: { id: 123, name: '小明', age: 25, gender: '男' },
      }"
      >people props函数 对象传参 必须用name，不能用path</router-link
    >
  </div>
</template>

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  console.log("Home mounted");
});
</script>
<style lang="scss" scoped>
.cescolor {
  height: 100px;
  width: 100%;
  width: auto;
  position: relative;
  // background-color: #fff;
  background-image: linear-gradient(
    290deg,
    #a842e1,
    #fe697c,
    #f7ea80,
    #79ddf5,
    #fe697c,
    #bbf1b3,
    #79ddf5,
    #f7ea80,
    #fe697c
  );
  background-clip: text;
  color: transparent;
  overflow: hidden;
  font-size: 60px;
  font-weight: 800;
  span {
    font-size: 60px;
    font-weight: 800;
    // color: #000;
  }
  .color-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: lighten;
    background-image: linear-gradient(
      290deg,
      transparent 20%,
      rgba(255, 255, 255, 0.6),
      transparent 80%
    );
    animation: colorbox1 1s infinite linear;
  }
  .color-box.box2 {
    left: -100%;
    animation: colorbox2 1s infinite linear;
  }
}
@keyframes colorbox1 {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
@keyframes colorbox2 {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}
a {
  display: block;
  color: lightcoral;
  font-size: 20px;
  font-weight: bold;
  line-height: 40px;
  // display: none;
}

@keyframes gradientChange {
  0% {
    background-image: linear-gradient(to right, red, orange);
  }
  25% {
    background-image: linear-gradient(to right, orange, yellow);
  }
  50% {
    background-image: linear-gradient(to right, yellow, green);
  }
  75% {
    background-image: linear-gradient(to right, green, blue);
  }
  100% {
    background-image: linear-gradient(to right, blue, indigo, violet);
  }
}

.dynamic-text {
  background-clip: text; /* 仅将背景应用于文字 */
  -webkit-background-clip: text; /* 对于旧版Safari */
  color: transparent; /* 文字颜色设置为透明，以便显示背景颜色 */
  font-size: 24px; /* 根据需要调整 */
  animation: gradientChange 10s infinite; /* 动画时间和重复次数 */
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap");

.home {
  min-height: 100vh;
  display: grid;
  place-items: center;
  // background-color: var(--bg);
  color: #fff;
  font-family: "Inter", "DM Sans", Arial, sans-serif;
  overflow: hidden;
}

.home *,
.home *::before,
.home *::after {
  font-family: inherit;
  box-sizing: border-box;
}

.content {
  text-align: center;
}

.title {
  font-size: var(--fs);
  font-weight: 800;
  letter-spacing: var(--ls);
  position: relative;
  overflow: hidden;
  background: var(--bg);
  margin: 0;
}

.subtitle {
}

.aurora {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  mix-blend-mode: darken;
  pointer-events: none;
}

.aurora__item {
  overflow: hidden;
  position: absolute;
  width: 60vw;
  height: 60vw;
  background-color: var(--clr-1);
  border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  filter: blur(var(--blur));
  mix-blend-mode: overlay;
}

.aurora__item:nth-of-type(1) {
  top: -50%;
  animation: aurora-border 6s ease-in-out infinite,
    aurora-1 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(2) {
  background-color: var(--clr-3);
  right: 0;
  top: 0;
  animation: aurora-border 6s ease-in-out infinite,
    aurora-2 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(3) {
  background-color: var(--clr-2);
  left: 0;
  bottom: 0;
  animation: aurora-border 6s ease-in-out infinite,
    aurora-3 8s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(4) {
  background-color: var(--clr-4);
  right: 0;
  bottom: -50%;
  animation: aurora-border 6s ease-in-out infinite,
    aurora-4 24s ease-in-out infinite alternate;
}

@keyframes aurora-1 {
  0% {
    top: 0;
    right: 0;
  }

  50% {
    top: 100%;
    right: 75%;
  }

  75% {
    top: 100%;
    right: 25%;
  }

  100% {
    top: 0;
    right: 0;
  }
}

@keyframes aurora-2 {
  0% {
    top: -50%;
    left: 0%;
  }

  60% {
    top: 100%;
    left: 75%;
  }

  85% {
    top: 100%;
    left: 25%;
  }

  100% {
    top: -50%;
    left: 0%;
  }
}

@keyframes aurora-3 {
  0% {
    bottom: 0;
    left: 0;
  }

  40% {
    bottom: 100%;
    left: 75%;
  }

  65% {
    bottom: 40%;
    left: 50%;
  }

  100% {
    bottom: 0;
    left: 0;
  }
}

@keyframes aurora-4 {
  0% {
    bottom: -50%;
    right: 0;
  }

  50% {
    bottom: 0%;
    right: 40%;
  }

  90% {
    bottom: 50%;
    right: 25%;
  }

  100% {
    bottom: -50%;
    right: 0;
  }
}

@keyframes aurora-border {
  0% {
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  }

  25% {
    border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
  }

  50% {
    border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
  }

  75% {
    border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
  }

  100% {
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  }
}
</style>